<template>
  <div class="container">
    <div class="view">
      <!-- tab组件 -->
      <el-row class="first">
        <el-col :span="6">
          <span>【题型】：{{ formDate.questionType == 1 ? "单选" : "多选" }}</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】：{{ formDate.id }}</span>
        </el-col>
        <el-col :span="6">
          <span>【难度】：{{ formDate.difficulty == 1 ? "简单" : "困难" }}</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】：{{ formDate.tags }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span>【学科】：{{ formDate.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】：{{ formDate.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】：{{ formDate.direction }}</span>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col>
          <div style="margin-top: 20px">【题干】：</div>
          <p
            style="color: blue"
            v-html="formDate.question"
          ></p>
          <div>
            {{ formDate.questionType == 1 ? "单选" : "多选" }}
            选项：(以下选中的选项为正确答案)
          </div>
          <!-- 单选按钮 -->
          <el-form>
            <el-form-item>
              <el-radio-group
                v-model="optionAnds"
                v-if="formDate.questionType === '1'"
              >
                <el-radio
                  v-for="item in radioOptions"
                  :key="item.code"
                  style="margin-top: 10px"
                  :label="item.code"
                >{{ item.code }}:{{ item.title }}</el-radio>
              </el-radio-group>
              <!-- 多选按钮 -->
              <el-checkbox-group
                v-model="optionsAnds"
                v-if="formDate.questionType === '2'"
              >
                <el-checkbox
                  v-for="item in checkboxOptions"
                  :key="item.code"
                  style="margin-top: 10px"
                  :label="item.code"
                >{{ item.code }}:{{ item.title }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <div style="margin-top: 20px">
          <div class="clearfix">
            【参考答案】：
            <el-button
              type="danger"
              @click="playVideo"
            >视频答案预览
            </el-button>
          </div>
          <video
            width="300px"
            height="300px"
            style="float: left"
            controls
            autoplay
            :src="formDate.videoURL"
            v-if="isPlaying"
          ></video>
        </div>
      </el-row>
      <hr />
      <el-row>
        <div style="margin-top: 20px">
          【答案解析】：<span
            style="display: inline-block"
            v-html="formDate.answer"
          ></span>
        </div>
      </el-row>
      <hr />
      <el-row>
        <div style="margin-top: 20px">
          <span>【题目备注】：{{ formDate.remarks }}</span>
        </div>
      </el-row>
      <el-row>
        <div style="margin: 20px auto">
          <el-button
            type="primary"
            @click="hChangeDialog"
          >关闭 </el-button>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import { detail } from '../../api/hmmm/questions'
export default {
  name: 'Mypreview',
  // 接收父组件传参
  props: ['value'],

  data () {
    return {
      formDate: {},
      isPlaying: false,
      optionAnds: '', // 单选选项
      optionsAnds: [], // 多选选项
      radioOptions: [
        // 单选选项
        {
          code: 'A',
          title: '选项A',
          img: '',
          isRight: false
        },
        {
          code: 'B',
          title: '选项B',
          img: '',
          isRight: false
        },
        {
          code: 'C',
          title: '选项C',
          img: '',
          isRight: false
        },
        {
          code: 'D',
          title: '选项D',
          img: '',
          isRight: false
        }
      ],
      checkboxOptions: [
        // 多选选项
        {
          code: 'A',
          title: '选项A',
          img: '',
          isRight: false
        },
        {
          code: 'B',
          title: '选项B',
          img: '',
          isRight: false
        },
        {
          code: 'C',
          title: '选项C',
          img: '',
          isRight: false
        },
        {
          code: 'D',
          title: '选项D',
          img: '',
          isRight: false
        }
      ]
    }
  },
  methods: {
    // 请求试题详情
    async getQuestion () {
      const params = {
        id: this.value
      }
      try {
        const res = await detail(params)
        console.log(res)
        this.formDate = res.data
        console.log(res.data.options)
        // 单选
        if (this.formDate.questionType === '1') {
          // 设置答案
          const rightItem = res.data.options.find((item) => item.isRight)
          this.radioOptions = res.data.options.sort((a, b) => {
            return a.code.charCodeAt(), b.code.charCodeAt()
          }).map((item) => {
            return {
              code: item.code,
              title: item.title,
              img: item.img,
              isRight: Boolean(item.isRight)
            }
          })
          this.optionAnds = rightItem ? rightItem.code : ''
        }
        // 多选
        else if (this.formDate.questionType === '2') {
          this.checkboxOptions = res.data.options.sort((a, b) => {
            return a.code.charCodeAt(), b.code.charCodeAt()
          }).map((item) => {
            return {
              code: item.code,
              title: item.title,
              img: item.img,
              isRight: Boolean(item.isRight)
            }
          })
          this.optionsAnds = res.data.options
            .filter((item) => item.isRight)
            .map((item) => item.code)
        }
      } catch (err) {
        console.log(err)
      }
    },
    hChangeDialog () {
      this.isPlaying = false
      this.$emit('Dialog', false)
    },
    // 播放视频
    playVideo () {
      this.isPlaying = !this.isPlaying
    }
  },
  created () {
    this.getQuestion()
    console.log(this.value)
  }
}
</script>

<style scoped >
.container .el-dialog__header {
  height: 50px;
}
.clearfix:after {
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.container .first {
  margin-bottom: 20px;
}
.el-radio {
  display: block;
}
.el-checkbox {
  display: block;
}
</style>
